<template>
<div class="login-wrap">
    <el-form label-position="top" label-width="80px" :model="formData" class="login-form">
        <h2>用户登录</h2>
        <el-form-item label="用户名">
            <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="formData.password" type="password"></el-input>
        </el-form-item>
        <el-button @click="handleLogin" class="login-button" type="primary">登录</el-button>
    </el-form>
</div>
</template>

<script>
export default {

    data() {
        return {
            formData: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        async handleLogin() {
            let result = await this.$http.post("/login", this.formData)
            if (result.status == 200) {
                this.$message({
                    type:'success',
                    message: '登录成功'
                });
                let token = result.data
                // 将 token 保存到localstorage
                localStorage.setItem("token", token);
                // 跳转到主页
                this.$router.push('/');
            } else {
                this.$message({
                    type: 'error',
                    message: '用户名或密码错误'
                });

            }
        }
    }


}
</script>

<style scoped>
.login-wrap {
    background-color: #324152;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-wrap .login-form {
    background-color: #fff;
    width: 400px;
    padding: 30px;
    border-radius: 5px;
}

.login-form h2 {
    color: #112c4b;
    text-align: center;
    margin-bottom: 20px;
}

.login-wrap .login-form .login-button {
    width: 100%;
}
</style>
